// 配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入 vue 组件（静态导入）
// import ContainerView from '@/views/example14/ContainerView.vue'
// import LoginView from '@/views/example14/LoginView.vue'
// import NotFoundView from '@/views/example14/NotFoundView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/views/example14/ContainerView.vue'), // 动态导入 vue 组件（用到时才加载，提高页面加载速度）
    redirect: '/c/p1', // 重定向到子组件
    // 子路由（嵌套路由）
    children: [
      // 动态导入子组件
      {
        path: 'c/p1',
        component: () => import('@/views/example14/container/P1View.vue')
      },
      {
        path: 'c/p2',
        component: () => import('@/views/example14/container/P2View.vue')
      },
      {
        path: 'c/p3',
        component: () => import('@/views/example14/container/P3View.vue')
      }
    ]
  },
  {
    path: '/login',
    component: import('@/views/example14/LoginView.vue') // 动态导入 vue 组件
  },
  {
    path: '/404',
    component: import('@/views/example14/NotFoundView.vue') // 动态导入 vue 组件
  },
  // 访问一个不存在的路径时重定向到404
  {
    path: '*',
    redirect: '/404'
  }
]

const router = new VueRouter({
  routes
})

export default router
